<template>
	<div class="table-body">

		<div class="flex-container table-row" v-for="(row,index) in data">
			<div v-if="showIndex" style="width: 40px;text-align: center;">{{index+1}}</div>
			<div v-for="(value,key) in row" style="flex:1">
				{{value}}
			</div>
		</div>
		<SearchBar :isShow="showSearchPanel"></SearchBar>
	</div>
</template>

<script>
	import TableBus from '@/components/table/TableBus.vue';
	import SearchBar from '@/components/table/SearchBar.vue';
	export default {
		name: 'TableBody',
		props: {
			showIndex: Boolean,
			data: Array,

		},
		data() {
			return {
				showSearchPanel: false
			};
		},
		created() {
			TableBus.$on('toggleSearchPanel', () => {
				this.showSearchPanel = !this.showSearchPanel;
			});
		},
		components: {
			SearchBar
		}


	}
</script>

<style>
	.table-body {
		flex: 1;
		overflow: auto;
		position: relative;
	}

	.table-row {
		height: 40px;
		line-height: 40px;
		background: #fff;
		border-bottom: 1px solid #e8e8e8;
		color: #949494;
		cursor: pointer;
	}

	.table-row:hover {
		background-color: #efefef;
	}
</style>
